import React from 'react';
import { Form, Icon, Input, Button, Alert} from 'antd';
import Axios from './../../assets/js/axios'
import {connect} from 'react-redux';
import {getToken, switchTitle} from './../redux/action'
import './index.scss';
const FormItem = Form.Item;

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibility: false,
            alertInfo: {}
        }
    }

    componentDidMount() {
        this.mounted = true
        let token = window.sessionStorage.getItem('token')
        const {dispatch} = this.props;
        dispatch(getToken(token))
        let RedirectUrl = this.props.location.state ? this.props.location.state.from.pathname : '/dashboard'
        if(token) {
            this.props.history.push(RedirectUrl)
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                Axios.ajax({
                    url: '/api/users/signIn',
                    methods: 'POST',
                    params: values
                }).then((res) => {
                        let alertInfo = res, visibility = ''
                        if(res.code === '000000') {
                            visibility = false
                            window.sessionStorage.setItem('token', res.token)
                            window.sessionStorage.setItem('headerTitle', values.username)
                            const {dispatch} = this.props;
                            dispatch(getToken(res.token))
                            dispatch(switchTitle(values.username))
                            this.props.history.push('/dashboard')
                        } else {
                            visibility = true
                        }
                        if(this.mounted) {
                            this.setState({
                                alertInfo: alertInfo,
                                visibility: visibility
                            })
                        }
                        
                })
            }
        })
    }

    onClose = (e) => {
        if(this.mounted) {
            this.setState({
                visibility: false,
                alertInfo: {}
            })
        }
    }

    componentWillUnmount() {
        this.mounted = false;
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login">
                <div className="s-nav">
                    <div className="l-row">
                        <div className="logo"></div>
                    </div>
                </div>
                {
                    this.state.visibility ? <div className="alert"><Alert {...this.state.alertInfo}></Alert> <Icon onClick={this.onClose} type="close" /> </div> : null
                }
                <div className="l-row">
                    <h2 className="title title_user title_mb_100">欢迎登录</h2>
                </div>
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                        {getFieldDecorator('username', {
                            initialValue: '',
                            rules: [{ required: true, message: '请输入用户名！' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入用户名！" autoComplete="off"/>
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('password', {
                            initialValue: '',
                            rules: [{ required: true, message: '请输入密码！' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码！" autoComplete="off"/>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" block htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

export default connect()(Form.create()(Login));